<template>
	<view class="page">
		<view class="tips">预售押金{{amount}}元，生效中</view>
		<view class="p-bom align-center">
			<view class="k">解冻金额</view>
			<input class="v" v-model="deduction_price" :placeholder="'最多'+price+'元~'" />
		</view>
		<view class="p-top">
			<view class="k">备注</view>
			<textarea maxlength="400" class="area" placeholder="必填~" v-model="deduction_content"></textarea>
		</view>
		<view class="p-btn" @click="submit()">
			确认解冻
		</view>

	</view>
</template>
<script lang="ts">
	import {
		reactive,
		toRefs,
		defineComponent,
		ref,
	} from 'vue';
	import uploadImages from '@/components/upload-images.vue'
	import { onLoad } from "@dcloudio/uni-app";
	const freezemer = defineComponent({
		components: {
			uploadImages,
		},
		props: {
		},
		setup(props : any, ctx : any) {
			const data = reactive({
				deduction_content: '',
				deduction_price: '',
				merchant_order_id: '',
				price: '',
				amount: '',
			})
			onLoad((e) => {
				data.merchant_order_id = e.id;
				API_thawable();
			})
			const API_thawable = async () => {
				const sendData = {
					merchant_order_id: data.merchant_order_id,
				}
				let res = await uni.$request('basedata.thawable', sendData);
				data.price = res.data.price;
				data.amount = res.data.amount;
			}
			const submit = async () => {
				if (!data.deduction_price) {
					uni.$tools.msg('请填写解冻金额');
					return;
				} if (!data.deduction_content) {
					uni.$tools.msg('请填写解冻备注');
					return;
				}
				const sendData = {
					merchant_order_id: data.merchant_order_id,
					thaw_price: data.deduction_price,
					remark: data.deduction_content,
				}
				let res = await uni.$request('basedata.thaw', sendData)
				console.log(res)
				uni.showModal({
					title: '提示',
					content: res.msg,
					showCancel: false,
				})
			}
			return {
				...toRefs(data),
				API_thawable,
				submit
			};
		}
	})
	export default freezemer;
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.page {
		padding: 24rpx 20rpx 0;
	}

	.tips {
		line-height: 60rpx;
	}

	.p-cont {
		width: 710rpx;
		background: #FFFFFF;
		box-shadow: 0px 1rpx 0px 0px rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		margin: 20rpx 0;
		padding: 25rpx;

		.k {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin: 10rpx 0 20rpx;

		}

	}

	.p-top {
		width: 710rpx;
		background: #FFFFFF;
		box-shadow: 0px 1rpx 0px 0px rgba(0, 0, 0, 0.05);
		border-radius: 10rpx;
		margin: 20rpx 0;

		.k {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-right: 56rpx;
			padding: 25rpx;
		}

		.area {
			padding: 20rpx;
			width: 100%;
			height: 200rpx;
			color: #333;
			font-size: 28rpx;
			line-height: 34rpx;
		}
	}

	.p-bom {
		margin-top: 10rpx;
		width: 710rpx;
		height: 98rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		padding: 0 25rpx;

		.k {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			margin-right: 56rpx;
		}

		.v {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
	}

	.p-btn {
		width: 690rpx;
		height: 85rpx;
		background: #3E6FEF;
		border-radius: 43rpx;
		text-align: center;
		line-height: 85rpx;

		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fff;

		&.disabled {
			background-color: #eee;
		}
	}
</style>